<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>聊天室</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="edge"/>
  
  <script src="js/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
    body {
      margin-top: 5px;
    }
  </style>
  
  <script src="WebIMConfig.js"></script>
  <script src="./js/webimSDK3.0.4.js"></script>
  <script src="./js/EMedia_x1v1.js"></script>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">登录和注册</h3>
        </div>
        <div class="panel-body">
          <div class="list-group">
            <input type="text" class="form-control" id="userId" placeholder="用户id"/><br>
            <button id="reg" type="button" class="btn btn-primary">注册</button>
            <button id="login" type="button" class="btn btn-primary">登录</button>
          </div>
        </div>
      </div>
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">消息接收者</h3>
        </div>
        <div class="panel-body">
          <div class="list-group">
            <input type="text" class="form-control" id="toUserId" placeholder="接收消息用户id"/><br>
          </div>
        </div>
      </div>
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">群发系统广播</h3>
        </div>
        <div class="panel-body">
          <input type="text" class="form-control" id="msg"/><br>
          <button id="broadcast" type="button" class="btn btn-primary">发送</button>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title" id="talktitle"></h3>
        </div>
        <div class="panel-body">
          <div class="well" id="log-container" style="height:400px;overflow-y:scroll">
            
          </div>
          <input type="text" id="myinfo" class="form-control col-md-12"/> <br>
          <button id="send" type="button" class="btn btn-primary">发送</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  var conn = {};
  console.log(WebIM, window.WebIM);
  WebIM.config = config;
  conn = WebIM.conn = new WebIM.default.connection({
    appKey: WebIM.config.appkey,
    isHttpDNS: WebIM.config.isHttpDNS,
    isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
    host: WebIM.config.Host,
    https: WebIM.config.https,
    url: WebIM.config.xmppURL,
    apiUrl: WebIM.config.apiURL,
    isAutoLogin: false,
    heartBeatWait: WebIM.config.heartBeatWait,
    autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
    autoReconnectInterval: WebIM.config.autoReconnectInterval,
    isStropheLog: WebIM.config.isStropheLog,
    delivery: WebIM.config.delivery
  })

    conn.listen({
      onOpened: function (message) {          //连接成功回调
        var myDate = new Date().toLocaleString();
        console.log("%c [opened] 连接已成功建立", "color: green");
        console.log(myDate);
        // rek();
        // alert(myDate + "登陆成功")
      
      },
      onClosed: function (message) {
        console.log("onclose:" + message);
        console.log(error);
      },         //连接关闭回调
      onTextMessage: function (message) {
        console.log('onTextMessage: ', message);
        alert(message.from)
        // $("#log-container").append(message.data);
        $("#log-container").append("<div class='bg-info'><label class='text-danger'>接收到id为"+message.from+"的消息:</label><div class='text-success'>"+message.data+"</div></div><br>");
        alert("end")
      }
    });

    var userId;
  var nickname;
  var password;
  //注册
  document.getElementById('reg').onclick = function () {
    userId = document.getElementById("userId").value;
    $.ajaxSettings.async = false
    $.get("/user/"+userId,function (data) {
      nickname = data.data.nickname;
      password = data.data.password;
    });

        var option = {
          username: userId,
          nickname: nickname,
          password: password,
          appKey: WebIM.config.appkey,
          success: function () {
            console.log('注册成功');
          },
          error: function () {
            console.log('注册失败');
          },
          apiUrl: WebIM.config.apiURL
        };
    conn.signup(option);
  };

  //登录
  document.getElementById('login').onclick = function () {
    userId = document.getElementById("userId").value;
    $.ajaxSettings.async = false
    $.get("/user/"+userId,function (data) {
      password = data.data.password;
    });

    // console.log(WebIM, window.WebIM);
    options = {
      apiUrl: WebIM.config.apiURL,
      user: userId,
      pwd: password,
      appKey: WebIM.config.appkey
    };
    conn.open(options);
    console.log(options)
  };

  //文本消息
  var conf = WebIM.config
  //var WebIM = WebIM.default
  WebIM.config = conf
  WebIM.message = WebIM.default.message
  WebIM.utils = WebIM.default.utils
  WebIM.debug = WebIM.default.debug
  WebIM.statusCode = WebIM.default.statusCode

    var myDate = new Date().toLocaleString();
  document.getElementById('send').onclick = function () {
    var tname = document.getElementById("toUserId").value;
    var tmsg = document.getElementById("myinfo").value;
    var id = conn.getUniqueId();                 // 生成本地消息id
    var msg = new WebIM.default.message('txt', id);      // 创建文本消息
  
        msg.set({
          msg: tmsg,                  // 消息内容
          to: tname,
          ext: {
            'time': myDate
          },                       // 接收消息对象（用户id）
          success: function (id, serverMsgId) {
            console.log('send private text Success');
            msgText = msg.body.msg;
          },
          fail: function (e) {
            console.log("Send private text error");
          }
        });
    msg.body.chatType = 'singleChat';
    conn.send(msg.body);
    $("#log-container").append("<div class='bg-info'><label class='text-danger'>发送给id为"+tname+"的消息:</label><div class='text-success'>"+tmsg+"</div></div><br>");
    console.log(msg);

  };

</script>

</body>
</html>